<template>
	<loading v-if='0 != loading' :status='loading' />
	<view class="body" v-else>
		<view class="banner-container">
			<image class="banner" :src="staticBaseUrl + '/static/image/coupon-banner.png'"></image>
			<view class="banner-content">
				<view class="coupon-info">
					<text v-if="coupon.couponType == 1||coupon.couponType == 3||coupon.couponType == 5" class="coupon-amount">
						抵扣 ￥<text style="font-size:70rpx">{{util.formatFenMoney(coupon.discountAmt)}}</text> 元
					</text>
					<text v-else-if="coupon.couponType == 2||coupon.couponType == 4" class="coupon-amount">
						尊享 <text style="font-size:70rpx">{{coupon.discountAmt}}</text> 折
					</text>
				</view>
			</view>
		</view>
		
		<view class="coupon-detail">
			<view class="merchant-name">{{coupon.couponName}}</view>
			<view class="detail-content">
				<view class="detail-title">
					<text class="cycle"></text>
					<text>使用条件</text>
				</view>
				<view class="detail-info">
					<template v-if="coupon.couponType == 1||coupon.couponType == 3||coupon.couponType == 5">
						<text>满{{util.formatFenMoney(coupon.useCondAmt)}}元减{{util.formatFenMoney(coupon.discountAmt)}}元</text>
					</template>
					<template v-else-if="coupon.couponType == 2||coupon.couponType == 4">
						<text>满{{util.formatFenMoney(coupon.useCondAmt)}}元尊享{{coupon.discountAmt}}折,最高减{{util.formatFenMoney(coupon.maxPromotionAmt)}}元</text>
					</template>
				</view>
			</view>
			<view class="detail-content">
				<view class="detail-title">
					<text class="cycle"></text>
					<text>有效期限</text>
				</view>
				<template v-if="coupon.expireDateType == 1">
					<view class="detail-info">{{coupon.expireBeginTime}} ~ {{coupon.expireEndTime}}</view>
				</template>
				<template v-else-if="coupon.expireDateType == 2">
					<view class="detail-info"><text>优惠券领取后{{coupon.expireDaysNum}}天内可用</text></view>
				</template>
			</view>
			<view class="detail-content">
				<view class="detail-title">
					<text class="cycle"></text>
					<text>使用说明</text>
				</view>
				<view class="detail-info"><text>{{coupon.description}}</text></view>
			</view>
		</view>
		
		<view class="coupon-detail">
			<view class="manager-info-item">
				<text>购买金额</text>
				<text>
					<text v-if="coupon.exchangePrice" class="item-exchange">
						<text style="font-size:24rpx">￥</text>{{coupon.exchangePrice}} 
					</text>
					<text v-if="coupon.exchangePrice && coupon.exchangePoint">+</text>
					<text v-if="coupon.exchangePoint" class="item-exchange"> 
						{{coupon.exchangePoint}} <text class="pay-left">积分</text>
					</text>
					<text v-if="coupon.isFree" class="item-exchange">免费领取</text>
				</text>
			</view>
			<view class="manager-info-item">
				<text>已发/分配</text>
				<text>{{issuedNumber}}/{{distributableNumber}}</text>
			</view>
		</view>
		
		<view class="pay-container">
			<template v-if="(coupon.totalNum-coupon.getNum)>0">
				<view class="btn-white-list" @click="addWhiteList">添加白名单</view>
				<view class="btn-qrcode" @click="handleShowQrcode">领券二维码</view>
			</template>
			<template v-else>
				<button class="btn" disabled>券已售罄</button>
			</template>
		</view>
		
		<u-popup :show="show" @close="onClose" custom-style="width:90%;border-radius:24rpx">
			<view class="auth-box" @click="doNothing">
				<view class="dialog-title">身份认证</view>
				<view class="dialog-iptbox">
					<view class="dialog-img">
						<image src="/static/image/my/head.png" mode="widthFix"></image>
					</view>
					<input type="text" class="ipt-username" value="" placeholder="填写姓名" @blur="bindNameChange" />
				</view>
				<view class="dialog-iptbox">
					<view class="dialog-img">
						<image src="/static/image/my/card-1.png" mode="widthFix"></image>
					</view>
					<input type="text" class="ipt-username" value="身份证" disabled="true" />
				</view>
				<view class="dialog-iptbox">
					<view class="dialog-img">
						<image src="/static/image/my/card-2.png" mode="widthFix"></image>
					</view>
					<input type="idcard" class="ipt-username" value="" placeholder="填写18位身份证号" maxlength="18" @blur="bindCardIdChange" />
				</view>
				<view class="errorBox" v-if="showError">
					<view class="error-img">
						<image src="/static/image/my/error.png" mode="widthFix"></image>
					</view>
					<view class="error-info">身份证认证失败,身份证号码与手机号不匹配,请核对信息</view>
				</view>
				<view class="dialog-btnbox">
					<view class="btn-cancel" @click="onClose">取消</view>
					<view class="btn-confirm" @click="authConfirm">确定</view>
				</view>
			</view>
		</u-popup>
	
		<u-popup :show="showQrcode" @close="onClose" mode="center" custom-style="background: transparent;text-align: center;align-items:center;">
			<view class="qrcode-box" @click="doNothing">
				<view v-if="qrCodeImg == null" class="reload" @click="getQrcode">
					<image src="/static/image/my/reload.png"></image>
					<text>点击重新获取</text>
				</view>
				<view class="qrcode-img" v-if="qrCodeImg != null">
					<!-- #ifdef MP-WEIXIN -->
					<image :src="util.attachedUrl(qrCodeImg,baseurl)"></image>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<image class="QRCode-img" :src="qrCodeImg"></image>
					<!-- #endif -->
				</view>
	
			</view>
			<u-icon class="icon-cancel" name="close-circle" size="36" color="#fff" @tap="onClose"></u-icon>
		</u-popup>
	</view>
</template>

<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
	let app = getApp()
	import utils from '../../../utils/util.js';
	import { http } from '@/utils/commonRequest.js'; // 局部引入
	import { baseDomain } from '@/utils/constant.js'
	import QRCode from '@/utils/weapp-qrcode.js'
	import {
		staticBaseUrl
	} from '@/utils/constant.js'
	
	export default {
		data() {
			return {
				staticBaseUrl: staticBaseUrl,
				platformConfig: app.globalData.platformConfig,
				baseurl: app.globalData.baseurl,
				loading: 1,
				couponId: null,
				mchntId: null,
				coupon: null,
				memberInfo: null,
				btnEnable: true,
				mersList: [],
				allMerchant: true,
				showConfirm: false,
				show: false,
				showQrcode: false,
				issuedNumber: 0,
				distributableNumber: 0,
				qrCodeImg: null,
				showError: false
			}
		},
		
		onLoad: function (options) {
			let that = this
			that.platformConfig = app.globalData.platformConfig;
			if (!utils.isEmpty(options) && !utils.isEmpty(options.couponId)) {
				that.couponId = options.couponId;
				that.saleRuleId = options.saleRuleId;
				
				that.$checkAuth().then(res => {
					that.getMemberInfo();
					that.queryCouponDetail(options.couponId, options.saleRuleId)
					that.getManagerCouponInfo();
					that.getQrcode();
				}).catch(err => {
					console.log(err);
				})
			} else {
				that.loading = 0;
				return utils.tips("参数异常");
			}
		},
		
		methods: {
			getMemberInfo: function () {
				if (null == this.memberInfo) {
					this.memberInfo = uni.getStorageSync('memberInfo')
				}
			},
			
			//获取优惠券详情
			queryCouponDetail: function (couponId, saleRuleId) {
				let that = this;
				if (utils.isEmpty(couponId)) {
					return
				} else {
					let params = {
						couponId: couponId,
						saleRuleId: saleRuleId == 'undefined' ? '' : saleRuleId
					}
					http.get("/zsnshCoupon/getCouponDetail", {params:params}).then(res => {
						res = res.data;
						if (200 == res.code) {
							that.coupon = res.couponInfo;
							that.allMerchant = res.allMerchant;
							that.mersList = res.mersList;
						} else {
							utils.tips("未查询到优惠券信息");
						}
						that.loading = false;
					})
				}
			},
			
			getManagerCouponInfo: function () {
				let that = this;
				http.get("/managerCoupon/getManagerCouponInfo", {
					params: {
						couponId: that.couponId
					}
				}).then(res => {
					res = res.data;
					if (200 == res.code) {
						let issuedNumber = res.issuedNumber;
						let distributableNumber = res.distributableNumber;
						that.issuedNumber = issuedNumber;
						that.distributableNumber = distributableNumber;
					}
				})
			},

			getQrcode: function () {
				// #ifdef MP-WEIXIN
				let that = this;
				http.get("/managerCoupon/getMiniappPromoCode", {
					params: {
						couponId: that.couponId,
						saleRuleId: that.saleRuleId,
						managerId: that.memberInfo.id
					}
				}).then(res => {
					res = res.data;
					if (200 == res.code) {
						let codePath = res.miniappCodePath;
						that.qrCodeImg = codePath;
					}
				})
				// #endif
				// #ifdef H5
				let imgData = QRCode.drawImg(baseDomain + '/pages/coupon/couponDetail/couponDetail?couponId=' + this.couponId + '&saleRuleId=' + this.saleRuleId + '&managerId=' + this.memberInfo.id, {
				  typeNumber: 4,
				  // 密度
				  errorCorrectLevel: 'L',
				  // 纠错等级
				  size: 800 // 白色边框
				});
				this.qrCodeImg = imgData
				// #endif
			},
			
			onClose: function () {
				this.show = false;
				this.showQrcode = false;
			},
		
			handleShowQrcode: function () {
				this.showQrcode = true;
			},
			
			doNothing: function () {
				return;
			},
			
			addWhiteList: function () {
				//券白名单模式: 1：认证用户专享；2：指定白名单
				let isIdentification = this.coupon.isIdentification;
				//是否需要上传优惠券白名单 is_uploading_whitelist 1：是；2：否
				let isUploadingWhitelist = this.coupon.isUploadingWhitelist;
				let mode = 0;
				if ("1" == isIdentification) {
					mode = 1;
				} else if ("1" == isUploadingWhitelist) {
					mode = 2;
				}
				if (mode == 0) {
					uni.showModal({
						title: '温馨提示',
						content: '此券无需白名单',
						showCancel: false,
						confirmColor: "#59A5F0",
					});
					return;
				}
				uni.navigateTo({
					url: 'addWhiteList?id=' + this.couponId + "&mode=" + mode,
				})
			},
			
			// onClose: function () {
			// 	this.showConfirm = false;
			// },
			
			handleShowConfirm: function () {
				this.showConfirm = true;
			},
			
		}
	}
</script>

<style>

.body {
  padding-bottom: 120rpx;
  font-size: 26rpx;
  background-color: #F6F9FF;
}

.banner-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner {
  width: 688rpx;
  height: 210rpx;
}

.banner-content {
  position: absolute;
  top: 0;
  left: 80rpx;
  height: 210rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50rpx 0;
  color: #fff;
}

.coupon-info {
  display: flex;
  align-items: flex-end;
  line-height: 1;
}

.coupon-amount {
  margin-right: 30rpx;
  margin-top: 40rpx;
  font-size: 40rpx;
  font-weight: bold;
}

.coupon-detail,
.store-container {
  margin: 36rpx;
  padding: 40rpx;
  box-shadow: 10rpx 10rpx 10rpx 10rpx #FAFAFA, -10rpx -10rpx 10rpx 10rpx #FAFAFA;
  background-color: #fff;
  border-radius: 16rpx;
}

.detail-content {
  color: #666;
  margin-top: 32rpx;
  line-height: 50rpx;
  font-size: 24rpx;
}

.merchant-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
  border-bottom: 1px solid #f4f5f7;
  padding-bottom: 18rpx !important;
}

.detail-title {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  font-weight: bold;
  color: #444;
}

.cycle {
  margin-right: 12rpx;
  width: 4rpx;
  height: 24rpx;
  background: #ED171F;
  height: 24rpx;
}

.detail-info {
  padding-left: 32rpx;
}

.pay-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 120rpx;
  padding: 0 32rpx;
  background: #FFFFFF;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
  /* margin: 50rpx 0 10rpx; */
}



.pay-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.pay-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #C02424;
}

.btn {
  padding: 0;
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
  width: 208rpx !important;
  line-height: 84rpx;
  text-align: center;
  background: #FF5642;
  border-radius: 42px;
  margin: 0 !important;
}

.btn[disabled] {
  background-color: rgba(255, 86, 66, 0.52) !important;
  color: #fff !important;
}

.pop-confirm-container {
  width: 690rpx;
  height: 450rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60rpx;
}

.confirm-title {
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 60rpx;
}

.confirm-info {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 80rpx;
}
.confirm-btn{
  width: 100%;
  display: flex;
  border-top: 1px solid #eaeaea;
  padding: 40rpx 60rpx 0;
  justify-content: space-between;
}
.confirm-btn-cancel{
  width: 260rpx;
  height: 80rpx;
  border-radius: 40rpx;
  border: 1px solid #eaeaea;
  text-align: center;
  line-height: 80rpx;
  color: #666;
  font-size: 34rpx;
  font-weight: 500;
}
.confirm-btn-ok{
  width: 260rpx;
  height: 80rpx;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  background: linear-gradient(140deg,#ffc996 0%,#ed176e 100%);
  font-size: 34rpx;
  font-weight: 500;
}

.btn-white-list {
  width: 312rpx;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  border: 1px solid #FD5938;
  border-radius: 44rpx;
  color: #FD5938;
  font-size: 34rpx;
  text-align: center;
}

.btn-qrcode {
  width: 312rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(140deg, #FFC996 0%, #ED176E 100%);
  border-radius: 44rpx;
  color: #FFFFFF;
  font-size: 34rpx;
  text-align: center;
}

.auth-box {
  padding: 64rpx 54rpx;
  border-bottom: 1rpx solid #eaeaea;
  box-sizing: border-box;
  /* border-radius: 24rpx; */
}

.dialog-title {
  text-align: center;
  color: #000;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.dialog-iptbox {
  display: flex;
  position: relative;
  padding-left: 16rpx;
  font-size: 28rpx;
  height: 96rpx;
  background-color: #eee;
  border-radius: 24rpx;
  align-items: center;
  margin-bottom: 16rpx;
}

.dialog-img {
  width: 48rpx;
  height: 48rpx;
  margin-right: 24rpx;
}

.dialog-img image {
  width: 100%;
}

.img-more {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  top: 50%rpx;
  right: 24rpx;
}

.img-more image {
  width: 100%;
}

.img-clean {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  top: 50%rpx;
  right: 20rpx;
}

.img-clean image {
  width: 100%;
}

.dialog-btnbox {
  padding: 40rpx 0rpx;
  display: flex;
  justify-content: space-between;
}

.btn-cancel,
.btn-confirm {
  width: 260rpx;
  height: 84rpx;
  background-color: #fff;
  color: #666;
  font-size: 34rpx;
  line-height: 84rpx;
  border: 1rpx solid #eaeaea;
  border-radius: 42rpx;
  text-align: center;
}

.btn-confirm {
  background: linear-gradient(140deg, #ffc996 0%, #ed176e 100%);
  color: white;
}

.manager-info-item {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.manager-info-item > text:first-child {
  font-size: 30rpx;
  font-weight: 500;
  color: #222222;
}

.manager-info-item > text:last-child {
  font-size: 30rpx;
  font-weight: 500;
  color: #FF5642;
}

.qrcode-box {
  width: 522rpx;
  height: 522rpx;
  background: linear-gradient(132deg, #FEFCF0 0%, #FFE0C6 100%);
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reload {
  width: 422rpx;
  height: 422rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  color: #848181;
}

.reload > image {
  width: 64rpx;
  height: 64rpx;
}

.qrcode-img {
  width: 422rpx;
  height: 422rpx;
  background: #ffffff;
}

.qrcode-img > image {
  width: 100%;
  height: 100%;
}

.qrcode-box > image {
  width: 422rpx;
  height: 422rpx;
}

.icon-cancel {
	position: absolute;
	left: 50%;
	bottom: -90rpx;
	transform: translateX(-50%);
}
</style>
